<template>
  <div class="g-policy-argeement">
    <h1>{{ dataType.title }}</h1>
    <div v-for="item in dataType.data" class="content">
      <div class="title">
        {{ item.title }}
      </div>
      <div v-for="i in item.desc" class="desc">
        <div v-if="!i.secondTitle" class="secondTitle">
          {{ i }}
        </div>
        <div v-else>
          <div class="secondTitle">
            {{ i.secondTitle }}
          </div>
          <div class="secondDesc" v-for="secondItem in i.secondDesc">
            {{ secondItem }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { policy, agreement } from './policy'
export default {
  data() {
    return {
      policy,
      agreement,
      dataType: {}
    }
  },
  validate({ params,query }) {
    console.log('params', params)
    return params.type == 'agreement' || params.type == 'policy'
  },
  asyncData({ params, query }) {
    // console.log('是不是协议？')
    return {
      dataType: params.type == 'agreement' ? agreement : policy
    }
  },
  mounted() {
    console.log(this.dataType)
  }
}
</script>

<style lang="less" scoped>
  .g-policy-argeement {
    h1 {
      text-align: center;
      margin-bottom: 60px;
    }
    max-width: 1368px;
    margin: 0 auto;
    padding: 60px 60px 80px;
    background-color: #fff;

    .content {
      .title {
        font-size: 26px;
        color: #000;
        font-weight: 700;
        margin-bottom: 20px;
      }
      .desc {
        .secondTitle {
          text-align:left;
          text-indent: 2em; 
          padding-bottom: 10px;
          font-size: 20px;
        }
        
        .secondDesc {
          text-align:left;
          text-indent: 3em; 
          padding-bottom: 10px;
          font-size: 18px;
        }
      }
    }
  }
</style>
